<div class="widgets">

  <div class="row">
    <div class="col-xs-12">
      <ba-card baCardClass="with-scroll">
        <div class="section">
          <form (ngSubmit)="search()" class="form-horizontal ">
            <div class="form-group row">

              <div class="col-sm-5">
                <label for="idcard" class="col-sm-5 control-label">身&nbsp;&nbsp;份&nbsp;&nbsp;证</label>
                <div class="col-sm-7">
                  <input [(ngModel)]="searchForm.idcard" name="idcard" type="text" class="form-control">
                </div>

              </div>

              <div class="col-sm-5">
                <label for="name" class="col-sm-5 control-label">姓名</label>
                <div class="col-sm-7">
                  <input [(ngModel)]="searchForm.name" name="name" type="text" class="form-control">
                </div>
              </div>

            </div>

            <div class="form-group row">

              <div class="col-sm-5">
                <label for="type" class="col-sm-5 control-label">申请类型</label>
                <div class="col-sm-7">
                  <select [(ngModel)]="searchForm.type" name="type" type="text" class="form-control">
                    <option value="">全部</option>
                    <option value="质量员">质量员</option>
                    <option value="施工员">施工员</option>
                  </select>
                </div>
              </div>

              <div class="col-sm-5">
                <div *ngIf="type === 'asso'">
                  <label for="available" class="col-sm-5 control-label">状态</label>
                  <div class="col-sm-7">
                    <select [(ngModel)]="searchForm.available" name="available" type="text" class="form-control">
                      <option value="0">有效</option>
                      <option value="1">无效</option>
                    </select>
                  </div>
                </div>
                <div *ngIf="type != 'asso'">
                  <label for="type" class="col-sm-5 control-label">证书编号</label>
                  <div class="col-sm-7">
                    <input [(ngModel)]="searchForm.serialno" name="name" type="text" class="form-control">
                  </div>
                </div>
              </div>
              <div class="col-sm-2" *ngIf="type != 'asso'">
                <button type="submit" class="btn btn-primary pull-left">
                  <i class="fa fa-search" aria-hidden="true"></i> 查询
                </button>
              </div>
            </div>
            <div class="form-group row" *ngIf="type === 'asso'">

              <div class="col-sm-5">
                <label for="type" class="col-sm-5 control-label">证书编号</label>
                <div class="col-sm-7">
                  <input [(ngModel)]="searchForm.serialno" name="name" type="text" class="form-control">
                </div>
              </div>

              <div class="col-sm-5">
                <label id="company-name" class="col-sm-5 control-label" for="companyname">企业名称</label>

                <div class="col-sm-7" id="company">
                  <input [(ngModel)]="searchForm.companyname" name="companyname" type="text" class="form-control">
                </div>
              </div>

              <div class="col-sm-2">
                <button type="submit" class="btn btn-primary pull-left">
                  <i class="fa fa-search" aria-hidden="true"></i> 查询
                </button>
              </div>

            </div>
          </form>
        </div>
        <div class="section btn-section btn-toolbar">
          <a role="button" class="btn btn-primary btn-review" [ngClass]="{'disabled': disableViewBtn}"
             (click)="toggleView()">查看详情</a>
          <span *ngIf="_errorMsg">{{_errorMsg}}</span>
          <span *ngIf="errorShow">网络异常，请重新登录</span>
        </div>
        <div class="section">
          <data-tables [searchParams]="searchForm" [config]="dataTablesConfig"
                       (onSelect)="tableRowSelect($event)"  (onError)="handleError($event)"></data-tables>
        </div>
      </ba-card>
    </div>
  </div>
</div>

<div bsModal #applyModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="applyModalLabel" aria-hidden="true" (onHide)="onHideModal()">
  <div class="modal-dialog modal-lg">
    <div class="modal-content" style="color: #000;">
      <div class="modal-header">
        <button class="close" (click)="applyModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">详情</h4>
      </div>

      <div class="modal-body">
        <div class="auth-block">
          <div class="row">
            <div class="col-xs-8">
              <form id="applyForm" class="form-horizontal">
                <div class="form-group row"><label class="col-sm-4 form-control-label">人员姓名</label>
                  <div class="col-sm-8"><input type="text" class="form-control" id="name"
                                               [value]="selectedData.certificate.name" readonly>
                  </div>
                </div>

                <div class="form-group row"><label class="col-sm-4 form-control-label">证书类型</label>
                  <div class="col-sm-8"><input type="text" class="form-control" id="type"
                                               [value]="selectedData.certificate.type" readonly>
                  </div>
                </div>
                <div class="form-group row"><label class="col-sm-4 form-control-label">证书编号</label>
                  <div class="col-sm-8"><input type="text" class="form-control" id="serialno"
                                               [value]="selectedData.certificate.serialno" readonly>
                  </div>
                </div>
                <div class="form-group row"><label class="col-sm-4 form-control-label">出生日期</label>
                  <div class="col-sm-8"><input type="text" class="form-control" id="birthday"
                                               [value]="selectedData.certificate.birthday" readonly>
                  </div>
                </div>
                <div class="form-group row"><label class="col-sm-4 form-control-label">企业名称</label>
                  <div class="col-sm-8"><input type="text" class="form-control" id="companyname"
                                               [value]="selectedData.certificate.companyname" readonly>
                  </div>
                </div>
                <div class="form-group row"><label class="col-sm-4 form-control-label">发证时间</label>
                  <div class="col-sm-8"><input type="text" class="form-control" id="issuedate"
                                               [value]="selectedData.certificate.issuedate" readonly>
                  </div>
                </div>
                <div class="form-group row"><label class="col-sm-4 form-control-label">证书状态</label>
                  <div class="col-sm-8"><input type="text" class="form-control" id="available"
                                               [value]="selectedData.certificate.available" readonly>
                  </div>
                </div>

                <div class="form-group row"><label class="col-sm-4 form-control-label">有效时间</label>
                  <div class="col-sm-8"><input type="text" class="form-control" id="availabletime"
                                               [value]="selectedData.certificate.availabletime" readonly>
                  </div>
                </div>
              </form>
            </div>
            <div class="col-xs-4">
              <div class="row">
                <div class="col-sm-10" *ngIf="selectedData.files">
                  <img src="{{selectedData.files.path}}" id="pic">
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

      <div class="modal-footer">
        <button class="btn btn-default" (click)="applyModal.hide()">关闭</button>
      </div>

    </div>
  </div>
</div>
